<script>
import request from "../../../utils/request";
const input_text_qy = {
  jcxx: {
    xx: [
      {
        title: "供应商名称",
        name: "supplierName",
        placeholder: "请输入供应商名称",
        value: "",
        require: true
      },
      {
        title: "公司类型",
        name: "companyType",
        placeholder: "请输入公司类型",
        value: "",
        type: "select"
      },
      {
        title: "供应商类别",
        name: "supplierCategoryName",
        placeholder: "请输入供应商类别",
        value: "",
        type: "select"
      },
      {
        title: "主营品类",
        name: "mainProductCategoryName",
        placeholder: "请输入主营品类",
        value: [
          {
            label: "1",
            value: "1"
          }
        ],
        type: "select"
      },
      {
        title: "纳税人识别号",
        name: "tax_number",
        placeholder: "请输入纳税人识别号",
        value: ""
      },
      {
        title: "成立时间",
        name: "establishment_date",
        placeholder: "请输入成立时间",
        value: "",
        type: "date"
      },
      {
        title: "所属省份",
        name: "province",
        placeholder: "请输入所属省份",
        value: ""
      },
      {
        title: "详细地址",
        name: "detailedAddress",
        placeholder: "请输入详细地址",
        value: ""
      },
      {
        title: "开户行名称",
        name: "bankName",
        placeholder: "请输入开户行名称",
        value: ""
      },
      {
        title: "银行账号",
        name: "bankAccount",
        placeholder: "请输入银行账号",
        value: ""
      },
      {
        title: "结算方式",
        name: "settlementMethod",
        placeholder: "请选择结算方式",
        value: ""
      },
      {
        title: "保证金",
        name: "deposit",
        placeholder: "请输入保证金",
        value: ""
      },
      {
        title: "推荐人",
        name: "recommenderName",
        placeholder: "请输入推荐人姓名",
        value: ""
      },
      {
        title: "推荐人电话",
        name: "recommenderPhone",
        placeholder: "请输入推荐人电话",
        value: ""
      },
      {
        title: "代理商级别",
        name: "agentLevel",
        placeholder: "请选择代理商级别",
        value: ""
      },
      {
        title: "备注",
        name: "remark",
        placeholder: "请输入备注",
        value: ""
      }
    ],
    img: [
      [
        {
          title: "营业执照",
          url: "",
          name: "business_url"
        }
      ],
      [
        {
          title: "质量管理证明",
          url: "",
          name: "zm"
        },
        {
          title: "代理授权书",
          url: "",
          name: "xx"
        },
        {
          title: "生产许可证",
          url: "",
          name: "xk"
        }
      ]
    ]
  },
  lxr: {
    xx: [
      {
        title: "法定代表人",
        name: "legalName",
        placeholder: "请输入联系人姓名",
        value: "",
        require: true
      },
      {
        title: "法定人身份证",
        name: "idNumber",
        placeholder: "请输入联系人电话",
        value: ""
      },
      {
        title: "法定人手机号",
        name: "legalPhone",
        placeholder: "请输入法定人手机号",
        type: "phone"
      },
      {
        title: "授权联系人",
        name: "authorized_contact",
        placeholder: "请输入授权联系人姓名",
        value: ""
      },
      {
        title: "职务",
        name: "contact_position",
        placeholder: "请输入职务",
        value: ""
      },
      {
        title: "联系人手机号",
        name: "contact_phone",
        placeholder: "请输入联系人手机号",
        value: ""
      }],
    img: [
      [
        {
          title: "授权委托书",
          url: "",
          name: "authorization_url"
        }
      ]
    ]
  }
}
const input_text_gr = {
  jcxx: {
    xx: [
      {
        title: "姓名",
        name: "supplier_name",
        placeholder: "请输入姓名",
        value: ""
      },
      {
        title: "籍贯",
        name: "native_place",
        placeholder: "请输入公司类型",
        value: "",
        type: "select"
      },
      {
        title: "身份证号",
        name: "id_number",
        placeholder: "请输入身份证号",
        value: "",
        type: "select"
      },
      {
        title: "手机号",
        name: "legal_phone",
        placeholder: "请输入手机号",
        value: "",
        type: "phone"
      },
      {
        title: "详细地址",
        name: "detailed_address",
        placeholder: "请输入详细地址",
        value: ""
      },
      {
        title: "开户行名称",
        name: "bank_name",
        placeholder: "请输入开户行名称",
        value: ""
      },
      {
        title: "银行账号",
        name: "bank_account",
        placeholder: "请输入银行账号",
        value: ""
      }
    ],
    img: [
      [
        {
          title: "身份证正面",
          url: "https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain",
          name: "sfzzm"
        },
        {
          title: "身份证反面面",
          url: "https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain",
          name: "sfzfm"
        },
        {
          title: "无犯罪记录证明",
          url: "https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain",
          name: "wfzzm"
        }
      ]
    ]
  },
  lxr: {
    xx: [
      {
        title: "姓名",
        name: "emergency_contact_name",
        placeholder: "请输入姓名",
        value: ""
      },
      {
        title: "联系电话",
        name: "emergency_contact_phone",
        placeholder: "请输入联系电话",
        value: ""
      }
    ]
  }
}
export default {
  name: "Ggmb",
  components: {},
  props: {
    type_user: {
      type: String,
      default: "qy"
    },
    type_: {
      type: String,
      default: "edit"
    },
    input_text: {
      type: Object,
      default: input_text_qy
    },
  },
  data() {
    return {
      lxr_title: "联系人信息",
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      url: "http://192.168.25.29:8080/common/upload",
      verify: false,
      verify_code: "",
      verify_code_s: false
    }
  },
  watch: {
    type_user: {
      handler(newV) {
        this.verify=false
        this.verify_code= ""
        this.verify_code_s= false
        if (newV === "gr") {
          this.lxr_title = "紧急联系人"
          this.input_text = input_text_gr
          return
        }
        this.input_text = input_text_qy
        this.lxr_title = "联系人信息"
      },
      immediate: true
    }
  },
  methods: {
    handleAvatarSuccess(res) {
      let doms = document.getElementsByClassName(res.name);
      let div = doms[0];
      let div2 = div.getElementsByClassName("el-upload")[0]
      let img = div2.getElementsByTagName("img")[0];
      img.src = process.env.VUE_APP_BASE_API + res.fileName
      let input = document.createElement("input")
      input.type = "hidden"
      input.name = res.name
      input.value = process.env.VUE_APP_BASE_API + res.fileName
      div2.appendChild(input)
      img.style.display = "inline-block"
      let i = div.getElementsByClassName("el-icon-plus")[0];
      i.style.display = "none"
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    my_submit() {
      let xxy = this.input_text;
      let xxs = xxy.jcxx.xx.concat(xxy.lxr.xx)
      let imgs = xxy.jcxx.img.concat(xxy.lxr.img)

      let hiddenInputs = document.querySelectorAll('input[type="hidden"]');
      // 获取所有照片
      let imgs_items = []
      imgs.forEach(function (item) {
        imgs_items = imgs_items.concat(item)
      })

      let imgs_parms = {}
      if (this.type_user === "qy") {
        let businessUrl = hiddenInputs[0].value;
        let additionalUrls = `${hiddenInputs[1].value},${hiddenInputs[2].value},${hiddenInputs[3].value}`;
        let authorizationUrl = hiddenInputs[4].value;
        imgs_parms = {
          businessUrl,
          additionalUrls,
          authorizationUrl
        }
      }
      // 发送请求
      let parms = {
        type: this.type_user
      }
      parms = Object.assign({}, imgs_parms, parms);
      xxs.forEach(function (item) {
        parms[item.name] = item.value
      })
      request.post(
        process.env.VUE_APP_BASE_API + "/supplier/public/addQyAll",
        parms
      ).then(res => {
        console.log(res)
      })
    },

    verify_phone(phone, code) {

      if (code !== '1234'){
        this.$message.error("验证码错误")
        return
      }
      this.$message.success("验证成功")
      this.verify = true
    },

    send_verify_phone(phone) {
      console.log(phone)
      if (!phone) {
        this.$message.error("请输入手机号")
        return
      }
      console.log(phone)
      this.verify_code_s = true
      this.$message.success("已发送验证码")
    }
  },
  created() {
    // console.log(document.getElementsByClassName(".el-input__inner"))
  }
}

</script>

<template>

  <div class="main">
    <div class="header">
      供应商详情信息
    </div>
    <el-form class="content">
      <div class="gys_type clear_fix">
        <div class="title left_fix">供应商类型&nbsp;&nbsp;:</div>
        <div class="content" v-if="type_ === 'watch'">
          <el-radio v-model="type_user" label="qy" class="my_radio" border v-if="type_user === 'qy'">企业注册</el-radio>
          <el-radio v-model="type_user" label="gr" class="my_radio" border v-if="type_user === 'gr'">个人注册</el-radio>
        </div>
        <div class="content left_fix" v-else>
          <el-radio v-model="type_user" label="qy" class="my_radio" border>企业注册</el-radio>
          <el-radio v-model="type_user" label="gr" class="my_radio" border>个人注册</el-radio>
        </div>
      </div>
      <div class="gys_xq">
        <div class="title">
          基本信息
        </div>
        <div class="from clear_fix">
          <div class="clear_fix">
            <div class="input-father left_fix" v-for="item in input_text.jcxx.xx">
              <div class="input-title">
                {{ item.title }}
              </div>
              <!--                    :disabled="type_ === 'watch'"-->
              <div class="input-div clear_fix">
                <div class="left_fix phone">
                  <template v-if="item.type === undefined || ((item.type === 'select' || item.type === 'date') && type_ === 'watch')">
                    <el-input
                      v-model="item.value"
                      type="text"
                      class="input"
                      :placeholder="item.placeholder"
                      :name="item.name"
                      :value="item.value"
                      :readonly="type_ === 'watch'"
                    ></el-input>
                  </template>
                  <template v-if="item.type === 'phone'">
                    <el-input
                      v-model="item.value"
                      type="text"
                      class="input"
                      :placeholder="item.placeholder"
                      :name="item.name"
                      :value="item.value"
                      :readonly="type_ === 'watch' || verify"
                    ></el-input>
                    <template v-if="item.type === 'phone' && type_ !== 'watch'">
                      <template v-if="!verify">
                        <el-input
                          style="
                        display: inline-block;
                        width: 150px;
                        margin-left: 20px;
                   "
                          placeholder="请输入验证码"
                          v-model="verify_code"
                          maxlength="4"
                          show-word-limit
                        >
                        </el-input>
                        <el-button
                          @click="verify_phone(item.value,verify_code)"
                          class="v_button"
                          v-if="verify_code_s"
                        >
                          验证
                        </el-button>

                        <el-button
                          @click="send_verify_phone(item.value)"
                          class="v_button"
                          v-else
                        >
                          点击发送验证码
                        </el-button>
                      </template>
                      <template v-else>
                        <i
                          class="el-icon-success"
                          style="
                        color: greenyellow;
                        font-size: 30px;
                        line-height: 40px;
                        vertical-align: bottom;
                        margin-left: 10px;
                      "
                        ></i>
                      </template>
                    </template>
                  </template>
                </div>
                <!--                :readonly="type_ === 'watch'"-->
                <el-select
                  v-model="item.value"
                  :placeholder="item.placeholder"
                  v-if="item.type === 'select' && type_ !== 'watch'"
                  class="input"
                >
                  <el-option
                    v-for="it in options"
                    :key="it.value"
                    :label="it.label"
                    :value="it.value">
                  </el-option>
                </el-select>
                <!--                  :readonly="type_ === 'watch'"-->
                <el-date-picker
                  v-model="item.value"
                  align="right"
                  type="date"
                  :placeholder="item.placeholder"
                  v-if="item.type === 'date' && type_ !== 'watch'"
                  :picker-options="item.value"
                  class="input"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="file left_fix clear_fix" v-for="item in input_text.jcxx.img">
            <div v-for="it in item" class="left_fix">
              <div class="input-title">
                {{ it.title }}
              </div>

              <el-upload
                class="avatar-uploader"
                action="http://192.168.25.29:8080/common/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                style="display: inline-block"
                :data="{
                  name : it.name
                }"
                name="file"
                :disabled="type_ === 'watch'"
                :class="it.name"
              >

                <img :src="it.url" class="avatar" alt="" :style="{display : it.url ? 'inline-block' : 'none'}">
                <i class="el-icon-plus avatar-uploader-icon" :class="it.name"
                   :style="{display : it.url ? 'none':'inline-block'  }"></i>
                <!--                <input hidden="hidden" type="text" :name="it.name">-->
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="lxr_xq clear_fix">
        <div class="title">
          {{ lxr_title }}
        </div>
        <div class="clear_fix">
          <div class="input-father left_fix" v-for="item in input_text.lxr.xx">
            <div class="input-title ">
              <i v-if="item.require" class="required">*</i>{{ item.title }}
            </div>
            <div class="input-div">
              <div class="left_fix">
                <template v-if="item.type === undefined || ((item.type === 'select' || item.type === 'date') && type_ === 'watch')">
                  <el-input
                    v-model="item.value"
                    type="text"
                    class="input"
                    :placeholder="item.placeholder"
                    :name="item.name"
                    :value="item.value"
                    :readonly="type_ === 'watch'"
                  ></el-input>
                </template>
                <template v-if="item.type === 'phone'">
                  <el-input
                    v-model="item.value"
                    type="text"
                    class="input"
                    :placeholder="item.placeholder"
                    :name="item.name"
                    :value="item.value"
                    :readonly="type_ === 'watch' || verify"
                  ></el-input>
                  <template v-if="item.type === 'phone' && type_ !== 'watch'">
                    <template v-if="!verify">
                      <el-input
                        style="
                        display: inline-block;
                        width: 150px;
                        margin-left: 20px;
                   "
                        placeholder="请输入验证码"
                        v-model="verify_code"
                        maxlength="4"
                        show-word-limit
                      >
                      </el-input>
                      <el-button
                        @click="verify_phone(item.value,verify_code)"
                        class="v_button"
                        v-if="verify_code_s"
                      >
                        验证
                      </el-button>

                      <el-button
                        @click="send_verify_phone(item.value)"
                        class="v_button"
                        v-else
                      >
                        点击发送验证码
                      </el-button>
                    </template>
                    <template v-else>
                      <i
                        class="el-icon-success"
                        style="
                        color: greenyellow;
                        font-size: 30px;
                        line-height: 40px;
                        vertical-align: bottom;
                        margin-left: 10px;
                      "
                      ></i>
                    </template>
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="file left_fix clear_fix" v-for="item in input_text.lxr.img">
          <div v-for="it in item" class="left_fix">
            <div class="input-title">
              {{ it.title }}
            </div>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              style="display: inline-block"
              :data="{
                  name : it.name
                }"
              name="file"
              :disabled="type_ === 'watch'"
              :class="it.name"
            >
              <!--              <input hidden="hidden" :name="it.name" value="">-->
              <img :src="it.url" class="avatar" alt="" :style="{display : it.url ? 'inline-block' : 'none'}">
              <i class="el-icon-plus avatar-uploader-icon" :class="it.name"
                 :style="{display : it.url ? 'none':'inline-block'  }"></i>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="todo" v-show="type_ !== 'watch'">
        <el-button type="success" @click="my_submit">提交</el-button>
        <el-button>取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

.v_button {
  height: 38px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
}

.verify {
  position: absolute;
  //top: 100px;
  //left: 0;
  //transform: translateY(-50vh);
  z-index: 100000;
}

.required {
  color: red;
  margin-right: 5px;
}

.main:last-child {
  margin-bottom: 50px;
}

.left_fix {
  float: left;
}

.right_fix {
  float: left;
}

.clear_fix::after {
  content: "";
  clear: both;
  display: table;
}

.header {
  font-weight: bold;
  font-size: 30px;
  padding: 20px;
  background-color: lightgray;
  margin-bottom: 20px;
}

.gys_type {
  border-bottom: 1px solid lightgray;
  padding-bottom: 10px;

}

.gys_type .title {
  font-size: 20px;
  margin: 0 20px;
}

.gys_type .content {
  font-size: 20px;
  margin: 0 5px;
}

.gys_xq .title {
  padding: 20px 0 20px 20px;
  font-size: 20px;
  border-bottom: 1px solid lightgray;
}

.input {
  width: 400px;
  height: 40px;
  border-radius: 5px;
  margin-top: 10px;
  line-height: 40px;
  color: #333;
}

.el-input::placeholder {
  color: red;
}


.input-father {
  margin: 20px 0 0 20px;
  height: 100px;
  width: 40vw;
}

.input-father .input-title {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.input-father .input-div {
  height: 40px;
  //font-size: 20px;
}

.file {
  width: 41vw;
  margin-top: 10px;
}

.file .input-title {
  padding: 10px 0 0 20px;
  font-size: 20px;
}

.file .input-img {
  width: 150px;
  margin: 20px 0 0 20px;
  vertical-align: bottom;
}

.lxr_xq {
  padding-bottom: 50px;
}

.lxr_xq .title {
  padding: 30px 0 20px 20px;
  font-size: 20px;
  border-bottom: 1px solid lightgray;
}

.avatar-uploader .el-upload {
  //border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  vertical-align: bottom;
  margin: 20px 0 0 20px;
  border: 1px solid lightgray;
  border-radius: 7px;
}

.avatar {
  width: 150px;
  height: 150px;
  //display: block;
  vertical-align: bottom;
  margin: 20px 0 0 20px;
}

.content .todo {
  margin-bottom: 50px;
  text-align: center;
}

.content .el-button {
  display: inline-block;
  margin-left: 20px;
}
</style>
